<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收货人信息表单</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            padding: 20px;
            color: #333;
        }
        
        .container {
            max-width: 600px;
            margin: 0 auto;
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            padding: 30px;
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            color: #333;
            font-size: 24px;
        }
        
        .form-group {
            margin-bottom: 20px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: bold;
            color: #555;
        }
        
        input[type="text"], 
        input[type="tel"],
        select {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 16px;
            transition: border-color 0.3s;
        }
        
        input[type="text"]:focus, 
        input[type="tel"]:focus,
        select:focus {
            outline: none;
            border-color: #ff4757;
            box-shadow: 0 0 0 2px rgba(255, 71, 87, 0.2);
        }
        
        .radio-group {
            display: flex;
            gap: 20px;
            margin-top: 8px;
        }
        
        .radio-option {
            display: flex;
            align-items: center;
        }
        
        .radio-option input {
            margin-right: 6px;
        }
        
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-top: 15px;
        }
        
        .checkbox-group input {
            margin-right: 8px;
        }
        
        .submit-btn {
            width: 100%;
            background-color: #ff4757;
            color: white;
            border: none;
            padding: 14px;
            font-size: 16px;
            border-radius: 4px;
            cursor: pointer;
            margin-top: 20px;
            transition: background-color 0.3s;
        }
        
        .submit-btn:hover {
            background-color: #ff2e43;
        }
        
        .form-row {
            display: flex;
            gap: 15px;
        }
        
        .form-row .form-group {
            flex: 1;
        }
        
        @media (max-width: 480px) {
            .form-row {
                flex-direction: column;
                gap: 0;
            }
            
            .container {
                padding: 20px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>收货人信息</h1>
        <form id="shippingForm">
            <div class="form-group">
                <label for="name">收货人</label>
                <input type="text" id="name" name="name" placeholder="请输入收货人姓名" required>
            </div>
            
            <div class="form-group">
                <label for="phone">手机号码</label>
                <input type="tel" id="phone" name="phone" placeholder="请输入手机号码" required>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="province">省份</label>
                    <select id="province" name="province" required>
                        <option value="">请选择省份</option>
                        <option value="beijing">北京市</option>
                        <option value="shanghai">上海市</option>
                        <option value="guangdong">广东省</option>
                        <option value="zhejiang">浙江省</option>
                        <option value="jiangsu">江苏省</option>
                    </select>
                </div>
                
                <div class="form-group">
                    <label for="city">城市</label>
                    <select id="city" name="city" required>
                        <option value="">请选择城市</option>
                    </select>
                </div>
            </div>
            
            <div class="form-group">
                <label for="address">详细地址</label>
                <input type="text" id="address" name="address" placeholder="请输入详细地址" required>
            </div>
            
            <div class="form-group">
                <label>标签</label>
                <div class="radio-group">
                    <div class="radio-option">
                        <input type="radio" id="home" name="tag" value="home" checked>
                        <label for="home">家</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="company" name="tag" value="company">
                        <label for="company">公司</label>
                    </div>
                    <div class="radio-option">
                        <input type="radio" id="school" name="tag" value="school">
                        <label for="school">学校</label>
                    </div>
                </div>
            </div>
            
            <div class="checkbox-group">
                <input type="checkbox" id="defaultAddress" name="defaultAddress">
                <label for="defaultAddress">设置为默认地址</label>
            </div>
            
            <button type="submit" class="submit-btn">提交</button>
        </form>
    </div>

    <script>
        // 省份和城市的对应关系
        const cities = {
            beijing: ["北京市"],
            shanghai: ["上海市"],
            guangdong: ["广州市", "深圳市", "东莞市", "佛山市"],
            zhejiang: ["杭州市", "宁波市", "温州市", "绍兴市"],
            jiangsu: ["南京市", "苏州市", "无锡市", "常州市"]
        };
        
        // 当省份选择变化时更新城市选项
        document.getElementById('province').addEventListener('change', function() {
            const province = this.value;
            const citySelect = document.getElementById('city');
            
            // 清空城市选项
            citySelect.innerHTML = '<option value="">请选择城市</option>';
            
            // 如果选择了有效的省份，添加对应的城市
            if (province && cities[province]) {
                cities[province].forEach(city => {
                    const option = document.createElement('option');
                    option.value = city;
                    option.textContent = city;
                    citySelect.appendChild(option);
                });
            }
        });
        
        // 表单提交处理
        document.getElementById('shippingForm').addEventListener('submit', function(e) {
            e.preventDefault();
            
            // 简单的表单验证
            const name = document.getElementById('name').value;
            const phone = document.getElementById('phone').value;
            const province = document.getElementById('province').value;
            const city = document.getElementById('city').value;
            const address = document.getElementById('address').value;
            
            if (!name || !phone || !province || !city || !address) {
                alert('请填写所有必填字段');
                return;
            }
            
            // 手机号码验证
            const phoneRegex = /^1[3-9]\d{9}$/;
            if (!phoneRegex.test(phone)) {
                alert('请输入有效的手机号码');
                return;
            }
            
            // 表单提交成功
            alert('收货人信息提交成功！');
            // 在实际应用中，这里可以添加AJAX请求将数据发送到服务器
        });
    </script>
</body>
</html>